<template>
  <el-aside class="sidebar" v-if="hasSidebar">
    <el-scrollbar always>
      <div class="groups">
        <section class="group" v-for="(sidebar, key) in sidebars" :key="key">
          <p class="title">{{ sidebar.text }}</p>
          <a
            v-for="(item, index) in sidebar.children"
            :key="index"
            :class="{ link: true, active: isActive(route, `${path}${item.link}`) }"
            :href="`${path}${item.link}.html`"
            >{{ item.text }}</a
          >
        </section>
      </div>
    </el-scrollbar>
  </el-aside>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter, useData, useRoute } from 'vitepress';
import { ElAside } from 'element-plus';
import { getSidebarConfig, isActive, normalize } from '../utils';

const { site, page, theme, frontmatter } = useData();

const route = useRoute();

const sidebars = computed(() => {
  if (page.value.frontmatter.sidebar === false) return [];
  const sidebars = getSidebarConfig(theme.value.sidebars, route.data.relativePath);
  return sidebars;
});

const path = computed(() => route.path.replace(/\/[\w]+\.html$/, ''));

const hasSidebar = computed(() => sidebars.value.length > 0);
</script>

<style scoped lang="scss">
.sidebar {
  @apply w-80 fixed overflow-y-auto top-15 <2xl:left-0 2xl:left-[calc((100%-var(--ep-screen-max-width))/2)] bottom-0;
  & > .el-scrollbar {
    @apply p-[48px_32px_0_32px];
  }
  .groups {
    @apply pb-20;
    .title {
      @apply text-base font-bold mb-2 dark:text-gray-50;
      &:first-child {
        @apply mt-0;
      }
    }
    .link {
      @apply block py-2.5 px-4 text-[0.9rem] leading-normal rounded-lg text-[var(--el-text-color-regular)] dark:text-gray-400;
      &:hover {
        @apply text-[var(--el-color-primary)] dark:text-sky-400;
      }
    }
    .active {
      @apply bg-[rgba(var(--el-color-primary-rgb),0.1)] font-semibold text-[var(--el-color-primary)] dark:text-sky-400 dark:bg-sky-200/50;
      transition: color 0.25s;
    }
  }
}
</style>
